@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
		margin: 0%;
	padding: 0%;
}


/*--------------------- Icones do login ---------------------*/




.form img{
	width: 4vw;
}

.form img:hover{
	width: 5.1vw;
}

.controlandocad{

	background-color:rgba(0,0,0,.6); 
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10000;
}
.container {
	display:flex;
	justify-content: center;
	align-items: center;
	height: 50vw; 

}

.content{
	background-color: white;
	border-radius: 15px;
	width: 60%;
	height: 50%;
	justify-content: space-between;
	align-items: center;
	position: relative;

}

.content::before{
	content:"";
	position: absolute;
	background-image: -webkit-linear-gradient(0deg, #21afe2 0%, #0c6994 100%);
	width:40%;
	height:100%;
	border-top-left-radius:15px;
	border---radius:15px;


	left: 0%;
}

.title{
	
	font-size: 2vw;
	font-weight: bold;
	text-transform: capitalize;
	margin-top: 2%; 
}

.title-primeiro{
	color:#fff;
}

.title-segundo{
	color:#149bc3;
}

.title-terceiro{
	color:#fff;
	font-size: 1vw;
}

.descricao{
	font-size: 1vw;
	line-height: 200%;
}


.descricao-primeiro{
color:#fff;
}
.descricao-segundo{
color:#c6cece;
font-size: 1vw;
}



.botao{
	background-color: #149bc3;
 color: #fff;
 font-size: 2vw;
 cursor: pointer;
 font-weight: bold;
 width:15%;
 align-self: center;
 border: none;
 margin-top:1vw;
}

.botao a{
	color: inherit;
	text-decoration: none;
}

.btna{
 border-radius: 15px;
 text-transform: uppercase;
 color: #fff;
 font-size: 0.5vw;
 padding: 4% 10%;
 cursor: pointer;
 font-weight: bold;
 width:35%;
 align-self: center;
 border: none;
}

.btna-primeiro{
	background-color:transparent;
	border:1px solid #fff;

}

.btna-primeiro:hover{
	background-color:#fff;
	color:#149bc3;
	transition: background-color .8s

}

.btna:focus{
    outline:0;
}

.botao:focus{
    outline:0;
}

.btna-segundo{
background-color:#149bc3; 
border: 1px solid #149bc3; 
}

.btna-segundo:hover{
	background-color:#fff;
 
	color:#149bc3;
	transition: background-color .8s
}

.primeirocont{
	display: flex;
		position: absolute;
}

.primeirocont .segunda-coluna{

	z-index: 11;	
}

h6 {
    font-size: 1vw;
}

.primeirocont .segunda-coluna{

	width: 60%;
	display: flex;
	flex-direction: column;

}


.primeirocont .primeira-coluna{
    text-align: center;
    width: 40%;
    z-index: 10;


}

.segunda-coluna{
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
}


.lista-midia{
	display: flex;
	list-style-type: none;

}

.link-social-media{

}

.link-social-media:not(:first-child){
	margin-left:10%;
}

.item-social-media {
	margin: 1vw 0;
}

.item-social-media{
	border: 1px solid #bdc3c7;
	border-radius: 50%;
	width:2vw;
	height:2vw;
	line-height:2vw;
	text-align: center;
	color:#95a5a6;
}

.link-social-media:hover .item-social-media{
	background-color: #149bc3;
	color:#fff;
	border-color: #149bc3

}


.form{
	display: flex;
	flex-direction: column;
	width: 55%;
	text-align: center;
}

.form input{
	height: 3vw;
	width: 100%;
	border:none;
	background-color:#dfe6e6 ;

}

input:-webkit-autofill{    
    -webkit-box-shadow: 0 0 0% 100% #ecf0f1 inset !important;
    -webkit-text-fill-color: #000 !important;
}

.icone{
	color:#7f8c8d;
	padding: 0 5px;
}

.label-input {
    display: flex;
    align-items: center;
    margin-top: 8px;
    margin-left: 25%;
}

a{
 text-decoration: none;   
}



/* segundo conteudo segundo painel*/
.segundocont{
	position: absolute;
	display: flex;
}

.segundocont .primeira-coluna{
	order:2;
	z-index: -1;
	align-items: center;
}

.segundocont .segunda-coluna{
	order:1;
	z-index: -1;
}


.password{
	color:#34495e;
	font-size: 14px;
}

.password::first-letter {
	text-transform:capitalize;
}




.sign-in-js .primeirocont .segunda-coluna {

	z-index: -1;

}


.sign-in-js .segundocont .segunda-coluna {

	z-index: 11;

}

.sign-in-js .segundocont .primeira-coluna{
	z-index: 13;
	width: 30%;
}

.sign-in-js .content::before{
	left:60%;
	animation: slidein 1s;
	z-index: 12;

}

.sign-up-js .content::before{
	animation: slideout 1s;	
	z-index: 12;
}

.sign-up-js .segundocont .primeira-coluna,
.sign-up-js .segundocont .segunda-coluna {

	z-index: -1;

}



.sign-up-js .primeirocont .segunda-coluna {

	z-index: 11;

}

.sign-up-js .primeirocont .primeira-coluna{
	z-index: 13;
}

/* Animação deslocamento por trás sdda animação*/

.sign-in-js .primeirocont .segunda-coluna{
	z-index: -1;
	position: relative;
	animation: deslocamentoe .8s;
}

.sign-up-js .segundocont .segunda-coluna{
	z-index: -1;
	position: relative;
	animation: deslocamentod .8s;
}

/* Animação do css deslocamento (efeito de apagarr fundo)*/

@keyframes deslocamentoe{

from{
   left: 0;
   opacity: 1;
   z-index: 12;
}

25%{
   left: -80px;
   opacity: .5;
   z-index: 12;
}

50%{
   left: -100px;
   opacity: .2;
   z-index: 12;
}


	
to{
	left: -110px;
	opacity: 0;
	z-index: -1;

	}

}

@keyframes deslocamentod{

from{
   left: 0;
   z-index: 12;
    opacity: 1;
}

25%{
   left: 80px;
       opacity: .5;
}

50%{
   left: 100px;
    opacity: .2;

}
	
to{
	left: 110px;
	z-index: -1;
	opacity: 0;

	}

}

/* Animação do css (transição veerde)*/

@keyframes slidein {

	from{
		left: 0;
		width: 40%;
	}

	25%{
		left: 5%;
		width: 50%;
	}
	50%{
		left: 25%;
		width: 60%;
	}
	75%{
		left: 45%;
		width: 50%;
	}
	to{
		left: 60%;
		width: 40%;	
	}

}


@keyframes slideout {

	from{
		left: 60%;
		width: 40%;
	}

	25%{
		left: 45%;
		width: 50%;
	}
	50%{
		left: 25%;
		width: 60%;
	}
	75%{
		left: 5%;
		width: 50%;
	}
	to{
		left: 0%;
		width: 40%;	
	}

}